<template>
    <div id="managePlatdiv">
        <div class="TopDiv">
            <div class="Top-Content">
                <div class="Top-Content-Left">
                    <span class="Top-Content-Left-Time">2024-08-29 08:30:30</span>
                </div>
                <div class="Top-Content-Center">
                    <span class="Top-Content-Left-Title">医顺达设备管理云平台(默认)</span>
                </div>
                <div class="Top-Content-Right">
                    <img class="Top-Content-Right-Setting" src="@/assets/equipment2/setting.png">
                    <div class="TipWindowContainer">
                        <!-- <img src="@/assets/equipment2/check-green.svg"> -->
                        <!-- <div class="Tipwindow">
                            <img class="TipClose" src="@/assets/equipment2/TipClose.png">
                            <label class="TipText">此处开启语音播报，可连接对讲机等终端设备进行语音实时提醒</label>
                            <a href="" class="TipLink"
                                target="_blank">查看详情</a>
                        </div> -->
                    </div>
                    <input
                        class="Top-Content-Right-Setting Top-Content-Right-Setting-btnOld Top-Content-Right-Setting-enablebtn"
                        type="button" value="开启语音播报" style="display: block;">
                    <!-- <div class="EnabledVoiceContainer" style="display: none;">
                        <div class="Top-Content-Right-Setting EnabledVoice">
                            <img src="/image/board/check-green.svg">
                            <label>语音播报已开启</label>
                        </div>
                        <input id="DisableVoice"
                            class="Top-Content-Right-Setting Top-Content-Right-Setting-btnOld Top-Content-Right-Setting-disablebtn"
                            type="button" onclick="DisableVoiceBroadcast()" value="关闭语音播报">
                    </div> -->
                </div>
            </div>
        </div>
        <div class="Center-Up">
            <div class="Cu1">
                <div class="Cu1-1">
                    <p>设备</p>
                </div>
                <div class="Cu1-2">
                    <p>综合事务</p>
                </div>
            </div>
            <div class="Cu2">
                <div class="sub-container">
                    <div class="sub-c1">
                        <div class="title">
                            <img src="@/assets/equipment2/Cu2-1.png"><span>审核</span>
                        </div>
                        <div class="numC num1" style="color:#FF1F45;">
                            <span id="Audit" class="num">1</span>
                        </div>
                        <div class="numC num2" style="color:#FF1F45;">
                            <span id="Audit1" class="num zero">0</span>
                        </div>
                    </div>
                </div>
                <div class="sub-container">
                    <div class="sub-c1">
                        <div class="title">
                            <img src="@/assets/equipment2/Cu2-2.png">
                            <span>待接单</span>
                        </div>
                        <div class="numC num1" style="color:#FF893E;">
                            <span id="Pendingorders" class="num">3</span>
                        </div>
                        <div class="numC num2" style="color:#FF893E;">
                            <span id="Pendingorders1" class="num zero">0</span>
                        </div>
                    </div>
                </div>
                <div class="sub-container">
                    <div class="sub-c1">
                        <div class="title">
                            <img src="@/assets/equipment2/Cu2-3.png">
                            <span>待维修</span>
                        </div>
                        <div class="numC num1" style="color:#FFC230;">
                            <span id="ToBeRepaired" class="num">1</span>
                        </div>
                        <div class="numC num2" style="color:#FFC230;">
                            <span id="ToBeRepaired1" class="num zero">0</span>
                        </div>
                    </div>
                </div>
                <div class="sub-container">
                    <div class="sub-c1">
                        <div class="title">
                            <img src="@/assets/equipment2/Cu2-4.png">
                            <span>维修中</span>
                        </div>
                        <div class="numC num1" style="color:#3DDC98;">
                            <span id="Repairing" class="num">10</span>
                        </div>
                        <div class="numC num2" style="color:#3DDC98;">
                            <span id="Repairing1" class="num">1</span>
                        </div>
                    </div>
                </div>
                <div class="sub-container">
                    <div class="sub-c1">
                        <div class="title">
                            <img src="@/assets/equipment2/Cu2-5.png"><span>待验证</span>
                        </div>
                        <div class="numC num1" style="color:#57b1ff;">
                            <span id="ToBeVerified" class="num">4</span>
                        </div>
                        <div class="numC num2" style="color:#57b1ff;">
                            <span id="ToBeVerified1" class="num zero">0</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="Center-Down">
            <div class="container">
                <el-table ref="tableRef" :data="tableData" id="scrollbarTable" :row-class-name="tableRowClassName"
                    :cell-class-name="tableCellClassName">
                    <el-table-column prop="status" label="状态" align="center" />
                    <el-table-column prop="deviceNameTransClass" label="设备名称/事务分类" show-overflow-tooltip
                        align="center" />
                    <el-table-column prop="faultDescription" label="故障描述" show-overflow-tooltip align="center" />
                    <el-table-column prop="fixTime" label="报修时间" show-overflow-tooltip align="center" />
                </el-table>
            </div>
        </div>
        <div class="Bottom" style="margin-top:20px;">
            <div class="Bottom Bottom-Content">
                <div class="Bottom Bottom-Frame">
                    <div class="Bottom Bottom-Element">
                        <div class="Element-Title">
                            <img style="width:3.2%" src="@/assets/equipment2/TroubleNum.png">
                            <span>近七天故障次数排行</span>
                        </div>
                        <div class="Element-Table TroubleNumClass">
                            <table class="tableClass" border="0" cellspacing="0" cellpadding="0">
                                <thead>
                                    <tr>
                                        <th>排名</th>
                                        <th>设备编码</th>
                                        <th>设备名称</th>
                                        <th>次数</th>
                                    </tr>
                                </thead>
                                <tbody id="TroubleNum"></tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="Bottom Bottom-Frame">
                    <div class="Bottom Bottom-Element">
                        <div class="Element-Title">
                            <img style="width:3.2%" src="@/assets/equipment2/RepairTime.png">
                            <span>近七天维修用时排行</span>
                        </div>
                        <div class="Element-Table RepairTime">
                            <table class="tableClass" border="0" cellspacing="0" cellpadding="0">
                                <thead>
                                    <tr>
                                        <th>排名</th>
                                        <th>设备编码</th>
                                        <th>设备名称</th>
                                        <th>维修用时(h)</th>
                                    </tr>
                                </thead>
                                <tbody id="RepairTime"></tbody>
                            </table>
                            <!-- <el-table :data="tableData1">
                                        <el-table-column prop="ranking" label="排名" width="180" />
                                        <el-table-column prop="deviceCode" label="设备编码" width="180" />
                                        <el-table-column prop="deviceName" label="设备名称" />
                                        <el-table-column prop="timesNumber" label="次数" />
                                    </el-table> -->
                        </div>
                    </div>
                </div>
                <div class="Bottom Bottom-Frame">
                    <div class="Bottom Bottom-Element">
                        <div class="Element-Title">
                            <img style="width:3.2%" src="@/assets/equipment2/DownTime.png">
                            <span>近七天停机时间排行</span>
                        </div>
                        <div class="Element-Table DownTime">
                            <table class="tableClass" border="0" cellspacing="0" cellpadding="0">
                                <thead>
                                    <tr>
                                        <th>排名</th>
                                        <th>设备编码</th>
                                        <th>设备名称</th>
                                        <th>停机时间(h)</th>
                                    </tr>
                                </thead>
                                <tbody id="DownTime"></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, getCurrentInstance, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';
let { proxy }: any = getCurrentInstance();
import { AppStore } from '@/stores/store';
let store = AppStore();

// 轮播表配置=======================================
let tableRef = ref(null);
const isScrolling = ref(true);//是否滚动
const timer: any = ref(null);//定义定时器
const animationFrame: any = ref(null);//定义动画帧

interface TableDataType {
    status: any
    deviceNameTransClass: string
    faultDescription: string
    fixTime: string
}
const tableData = reactive([]);
const getData = () => {
    tableData.push(
        {
            status: '维修中',
            deviceNameTransClass: '电子絮凝器',
            faultDescription: '运行中有异响',
            fixTime: '2023-11-17 11:32'
        },
        {
            status: '待接单',
            deviceNameTransClass: '台式钻床',
            faultDescription: '电机不动，驱动显示正常...11111111111111111111111111111111111',
            fixTime: '2024-08-17 08:32'
        }, {
        status: '待验证',
        deviceNameTransClass: '四桶布袋吸尘器222222222222222222222222222222',
        faultDescription: '开关故障',
        fixTime: '2024-08-29 07:41'
    },
        {
            status: '审核中',
            deviceNameTransClass: '空调',
            faultDescription: '运行中有异响',
            fixTime: '2024-06-20 18:36'
        }, {
        status: '维修中',
        deviceNameTransClass: '电子絮凝器',
        faultDescription: '运行中有异响',
        fixTime: '2023-11-17 11:32'
    },
        {
            status: '待接单',
            deviceNameTransClass: '台式钻床',
            faultDescription: '电机不动，驱动显示正常...11111111111111111111111111111111111',
            fixTime: '2024-08-17 08:32'
        }, {
        status: '待验证',
        deviceNameTransClass: '四桶布袋吸尘器222222222222222222222222222222',
        faultDescription: '开关故障',
        fixTime: '2024-08-29 07:41'
    },
        {
            status: '审核中',
            deviceNameTransClass: '空调',
            faultDescription: '运行中有异响',
            fixTime: '2024-06-20 18:36'
        }, {
        status: '维修中',
        deviceNameTransClass: '电子絮凝器',
        faultDescription: '运行中有异响',
        fixTime: '2023-11-17 11:32'
    },
        {
            status: '待接单',
            deviceNameTransClass: '台式钻床',
            faultDescription: '电机不动，驱动显示正常...11111111111111111111111111111111111',
            fixTime: '2024-08-17 08:32'
        }, {
        status: '待验证',
        deviceNameTransClass: '四桶布袋吸尘器222222222222222222222222222222',
        faultDescription: '开关故障',
        fixTime: '2024-08-29 07:41'
    },
        {
            status: '审核中',
            deviceNameTransClass: '空调',
            faultDescription: '运行中有异响',
            fixTime: '2024-06-20 18:36'
        },
        {
            status: '维修中',
            deviceNameTransClass: '电子絮凝器',
            faultDescription: '运行中有异响',
            fixTime: '2023-11-17 11:32'
        },
        {
            status: '待接单',
            deviceNameTransClass: '台式钻床',
            faultDescription: '电机不动，驱动显示正常...11111111111111111111111111111111111',
            fixTime: '2024-08-17 08:32'
        }, {
        status: '待验证',
        deviceNameTransClass: '四桶布袋吸尘器222222222222222222222222222222',
        faultDescription: '开关故障',
        fixTime: '2024-08-29 07:41'
    },
        {
            status: '审核中',
            deviceNameTransClass: '空调',
            faultDescription: '运行中有异响',
            fixTime: '2024-06-20 18:36'
        }, {
        status: '维修中',
        deviceNameTransClass: '电子絮凝器',
        faultDescription: '运行中有异响',
        fixTime: '2023-11-17 11:32'
    }, {
        status: '维修中',
        deviceNameTransClass: '电子絮凝器',
        faultDescription: '运行中有异响',
        fixTime: '2023-11-17 11:32'
    },
        {
            status: '待接单',
            deviceNameTransClass: '台式钻床',
            faultDescription: '电机不动，驱动显示正常...11111111111111111111111111111111111',
            fixTime: '2024-08-17 08:32'
        }, {
        status: '待验证',
        deviceNameTransClass: '四桶布袋吸尘器222222222222222222222222222222',
        faultDescription: '开关故障',
        fixTime: '2024-08-29 07:41'
    },
        {
            status: '审核中',
            deviceNameTransClass: '空调',
            faultDescription: '运行中有异响',
            fixTime: '2024-06-20 18:36'
        }, {
        status: '维修中',
        deviceNameTransClass: '电子絮凝器',
        faultDescription: '运行中有异响',
        fixTime: '2023-11-17 11:32'
    },
    )
    // 要在数据都加载渲染完成后去获取表格的滚动区域dom
    setTimeout(() => { scroll() }, 1000)
}

const scrollToNextRow = (scrollDom, rowHeight, currentScrollTop, nextRowPosition) => {
    // scrollDom: 表格滚动区域的 DOM 元素。
    // rowHeight: 表格行的高度。
    // currentScrollTop: 当前滚动条的位置。
    // nextRowPosition: 下一行的位置。

    // 如果已经有动画帧在进行，则取消它。
    if (animationFrame.value) cancelAnimationFrame(animationFrame.value);
    // totalDistance: 要滚动的总距离。
    const totalDistance = nextRowPosition - currentScrollTop;
    const duration = 1500; // 滚动持续时间，单位毫秒
    const startTime = performance.now();//开始时间，使用 performance.now() 获取。
    // animateScroll 是一个回调函数，用于逐帧更新滚动位置。
    const animateScroll = (timestamp: any) => {
        const progress = timestamp - startTime;//progress: 当前时间与开始时间的差值。
        const percentage = Math.min(1, progress / duration);//percentage: 当前进度的百分比，确保不超过 1。
        const currentTop = currentScrollTop + totalDistance * percentage;//currentTop: 当前滚动条的新位置。
        scrollDom.scrollTop = currentTop;
        if (progress < duration) {
            // 如果滚动还没有完成（即 progress < duration），则继续请求下一帧动画。
            animationFrame.value = requestAnimationFrame(animateScroll);
        } else {
            // 如果滚动已经完成并且到达底部，则将滚动条重置到顶部。
            if ((scrollDom.scrollHeight - (scrollDom.clientHeight + scrollDom.scrollTop)) < 1) {
                scrollDom.scrollTop = 0;
            }
        }
    };
    // 启动第一次动画帧，开始滚动动画。
    animationFrame.value = requestAnimationFrame(animateScroll);
};

const scroll = () => {
    if (timer.value) clearInterval(timer.value);
    let status = true;
    if (tableRef.value) {
        const scrollDom = tableRef.value.$refs.bodyWrapper.getElementsByClassName("el-scrollbar__wrap")[0];
        const rowHeight = tableRef.value.$refs.bodyWrapper.getElementsByClassName("el-table__row")[0].offsetHeight;
        // 当鼠标移入滚动区域时，设置 status 为 false，禁止滚动。
        scrollDom.addEventListener('mouseover', () => {
            status = false;
        });
        // 当鼠标移出滚动区域时，设置 status 为 true，允许滚动。
        scrollDom.addEventListener('mouseout', () => {
            status = true;
        });
        timer.value = setInterval(() => {
            const currentScrollTop = scrollDom.scrollTop;//获取当前滚动条的位置
            const nextRowPosition = currentScrollTop + rowHeight;//计算下一行的位置
            if (status) {
                // 如果 status 为 true（即允许滚动），则调用 scrollToNextRow 函数进行平滑滚动。
                scrollToNextRow(scrollDom, rowHeight, currentScrollTop, nextRowPosition);
            }
        }, 3000);
    }
};

onMounted(() => {
    getData();
    setTimeout(() => {
        scroll();
    }, 1000);
});

onUnmounted(() => {
    if (timer.value) clearInterval(timer.value);
    timer.value = null;
    isScrolling.value = false;
    if (animationFrame.value) cancelAnimationFrame(animationFrame.value);
});

// 奇偶数行数样式
const tableRowClassName = ({
    row,
    rowIndex,
}: {
    row: TableDataType
    rowIndex: number
}) => {
    if (rowIndex % 2 === 1) {
        //奇数行
        return 'odd-row'
    } else {
        // 偶数行
        return 'even-row'
    }
}

// 单元格字体颜色样式
const tableCellClassName
    = ({
        row,
        columnIndex,
    }: {
        row: TableDataType
        columnIndex: number
    }) => {
        if (row.status === '维修中' && columnIndex === 0) {
            return 'greenColor'
        } else if (row.status === '待维修' && columnIndex === 0) {
            return 'yellowColor'
        } else if (row.status === '待接单' && columnIndex === 0) {
            return 'orangeColor'
        } else if (row.status === '审核中' && columnIndex === 0) {
            return 'redColor'
        } else if (row.status === '待验证' && columnIndex === 0) {
            return 'blueColor'
        }
    }

//轮播表结束==============================================
</script>

<style lang="scss" scoped>
#managePlatdiv {
    height: 100%;
    background-image: url('@/assets/equipment2/backgroundBlueImage.png');

    .TopDiv {
        height: 8%;
        width: 100%;

        .Top-Content {
            margin: 0 auto;
            padding: 0 20px;
            width: calc(100% - 40px);
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;

            span {
                height: 100%;
                display: inline-block;
                text-align: center;
            }

            .Top-Content-Left {
                width: 20%;
                height: 100%;
                padding-left: 15px;
                margin-top: -15px;
                background-image: url('@/assets/equipment2/topLeftKuang.png');
                background-size: 100% 42%;
                background-position: center;
                background-repeat: no-repeat;

                .Top-Content-Left-Time {
                    // font-family: FX-LED;
                    color: #23cefd;
                    font-size: 1.1vw;
                    line-height: 3.8vw;
                }
            }

            .Top-Content-Center {
                background-image: url('@/assets/equipment2/centerTitle.png');
                background-position: center;
                background-repeat: no-repeat;
                text-align: center;
                width: 70%;
                height: 100%;

                .Top-Content-Left-Title {
                    margin: 0 auto;
                    width: auto;
                    font-size: 1.5vw;
                    font-weight: 600;
                    color: #23cefd;
                    letter-spacing: 0.3vw;
                    line-height: 3.4vw;
                }
            }

            .Top-Content-Right {
                width: 20%;
                height: 100%;
                margin-top: -15px;
                background-image: url('@/assets/equipment2/topRightKuang.png');
                background-size: 100% 42%;
                background-position: center;
                background-repeat: no-repeat;

                .Top-Content-Right-Setting {
                    height: 1vw;
                    margin-top: 1.4vw;
                    float: right;
                    margin-right: 0.8vw;
                    cursor: pointer;
                }

                .TipWindowContainer {
                    position: absolute;
                    top: 4vh;
                    right: 0;
                    z-index: 1;

                    .Tipwindow {
                        background-image: url('@/assets/equipment2/tipWindow.png');
                        float: right;
                        background-position: center;
                        background-repeat: no-repeat;
                        background-size: cover;
                        position: relative;
                        width: 15vw;
                        height: 9vw;

                        .TipClose {
                            position: absolute;
                            right: 0.55vw;
                            top: 1vh;
                            width: 0.55vw;
                            display: block;
                            margin-left: 10.5vw;
                        }

                        .TipText {
                            display: block;
                            font-size: 0.95vw;
                            letter-spacing: 0.1vw;
                            width: 10.5vw;
                            margin: auto;
                            margin-top: 5vh;
                            color: #fff;
                        }

                        .TipLink {
                            float: right;
                            margin-left: 1vw;
                            margin-top: 1vh;
                            font-size: 0.95vw;
                            color: #00dcff;
                            text-decoration-line: underline;
                        }
                    }
                }

                .Top-Content-Right-Setting-btnOld {
                    margin-right: 1vw;
                    margin-top: 1.4vw;
                    background-color: #0c2c5a;
                    width: 6.5vw;
                    height: 1.2vw;
                    color: #23cefd;
                    border: solid 1px;
                    float: right;
                    cursor: pointer;
                }

                .EnabledVoiceContainer {
                    width: auto;
                    height: auto;

                    .EnabledVoice {
                        margin-right: 1.5vw;

                        img {
                            width: 1vw;
                            vertical-align: middle;
                            margin-right: 0.2vw;
                        }

                        label {
                            color: #23cefd;
                            font-size: 0.75vw;
                            vertical-align: middle;
                        }
                    }
                }
            }
        }
    }

    .Center-Up {
        margin-top: 0.3vw;
        position: relative;

        .Cu1 {
            margin-top: 5vh;

            .Cu1-1 {
                background-image: url('@/assets/equipment2/Cu1-1.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
                width: 97.5%;
                height: 5vh;
                margin: auto;

                p {
                    color: #fff;
                    margin: 0;
                    margin-left: 4.6vw;
                    font-size: 1.7vh;
                    line-height: 5vh;
                }
            }

            .Cu1-2 {
                background-image: url('@/assets/equipment2/Cu1-2.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
                width: 97.5%;
                height: 5vh;
                margin: auto;

                p {
                    color: #fff;
                    margin: 0;
                    margin-left: 3.8vw;
                    font-size: 1.7vh;
                    line-height: 5vh;
                }
            }
        }

        .Cu2 {
            position: absolute;
            text-align: center;
            top: -5vh;
            width: 100%;

            .sub-container {
                display: inline-block;
                width: 18%;

                .sub-c1 {
                    float: right;

                    .title {
                        color: #00dcff;
                        height: 5vh;

                        img {
                            vertical-align: middle;
                        }

                        span {
                            vertical-align: middle;
                            display: inline-block;
                            font-size: 1.6vh;
                        }
                    }

                    .numC {
                        height: 40px;
                        line-height: 46px;
                        font-size: 16px;
                    }

                    .num2 {
                        height: 45px;
                        line-height: 60px;
                    }

                    .Audit {
                        color: #ff1f45;
                    }

                    .Audit1 {
                        color: #3c5a74;
                    }
                }
            }
        }
    }

    .Center-Down {
        margin: 2vh 20px 20px 20px;
        margin-top: 2vh;
        width: calc(100% - 40px - 80px);
        height: 37%;
        padding: 15px 40px;
        background-image: url('@/assets/equipment2/Center-Down.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        text-align: center;

        .container {
            width: 100%;
            height: 100%;

            .el-table {
                width: 100%;
                height: 100%;
                scroll-behavior: smooth;
            }

            // 表头
            ::v-deep .el-table th.el-table__cell {
                background-color: #1f3452 !important;
                font-size: 20px;
                color: #06b9d9;
                height: 57px;
                border: none;
            }

            // 表行内容
            ::v-deep .el-table .odd-row {
                --el-table-tr-bg-color: #102142 !important;
                height: 5.2vh;
                font-size: 1vw;
                color: #b5ddd6;
            }

            ::v-deep .el-table .even-row {
                --el-table-tr-bg-color: #243b59 !important;
                height: 5.2vh;
                font-size: 1vw;
                color: #b5ddd6;
            }

            ::v-deep .el-table td.el-table__cell {
                border: none !important;
                font-size: 1vw;
            }

            ::v-deep .el-table__inner-wrapper::before {
                background-color: transparent;
            }

            ::v-deep .greenColor {
                color: #3ddc98;
            }

            ::v-deep .yellowColor {
                color: #ffc230;
            }

            ::v-deep .orangeColor {
                color: #ff893e;
            }

            ::v-deep .redColor {
                color: #ff3d0e;
            }

            ::v-deep .blueColor {
                color: #57b1ff;
            }

            ::v-deep .el-table tbody tr:hover>td {
                background-color: transparent;
            }
        }
    }

    .Bottom {
        height: 31%;

        div {
            height: 100%;
        }
    }

    .Bottom-Content {
        width: 99.35%;
        margin: 0 auto;

        .Bottom-Frame {
            width: 33.3%;
            display: inline-block;

            .Bottom-Element {
                width: 96%;
                margin: 0 auto;
                background-image: url('@/assets/equipment2/bottomCard1.png');
                background-repeat: no-repeat;
                background-position: bottom;
                background-size: 100% 100%;

                .Element-Title {
                    text-align: center;
                    height: 2vw;
                    margin: 0 auto;
                    padding-top: 1vw;
                    color: #00dcff;

                    img {
                        vertical-align: text-top;
                        display: inline-block
                    }

                    span {
                        vertical-align: text-top;
                        display: inline-block;
                        line-height: 1.15vw;
                        font-size: 0.9vw;
                        margin-left: 0.5vw;
                    }
                }

                .Element-Table {
                    height: calc(100% - 4vw);
                    padding: 0 20px 20px 20px;

                    .tableClass {
                        width: 100%;

                        thead {
                            height: 5vh;
                            color: #00dcff;
                            background-color: #1b2f4b;
                            font-size: 1vw;
                        }
                    }
                }

                .TroubleNumClass {
                    thead {
                        color: #298fff !important;
                    }
                }

                .DownTime {
                    thead {
                        color: #ff944c !important;
                    }
                }

            }
        }
    }


}
</style>